<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!-- 1.先进行布局，放置一个复选框，一个下拉列表框，两个文本框，一个展示结果的div
            2.把每个表单元素的对应数据展示出来，用于过程性检测，后期删除
            3.把下拉框和展示结果的div进行隐藏和显示的操作
            4.获取文本框中的数据，根据是否是会员以及等级来决定折扣比例，进行计算。
            可以使用计算属性，侦听器等来实现 -->
        <input type="checkbox" v-model="che">是否会员
        <select v-if="che" v-model="member">
            <option value="黄金会员">黄金会员</option>
            <option value="钻石会员">钻石会员</option>
            <option value="白银会员">白银会员</option>
        </select><br>
        <div >{{member}}欢迎你!</div>
            数量：<input type="text" v-model="number">{{number}}<br>
            单价：<input type="text" v-model="price">{{price}}<br>
            <div v-if="che && number && price">
            尊敬的{{member}}，你购买的数量是{{number}}, 单价是{{price}}, 折扣是{{discount}}, 总价是{{totalPrice}}
        </div>
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                che:false,
                member:'客户',
                number:'',
                price:'',
                
            }
        },
         computed: {
                discount() {
                    if (this.member === '黄金会员') return 0.65;
                    if (this.member === '钻石会员') return 0.5;
                    if (this.member === '白银会员') return 0.8;
                    return 1;
                },
                totalPrice() {
                    return (this.number * this.price * this.discount).toFixed(2);
                }
            }
    }).mount("#app")
</script>